<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="jquery.js"></script>
	<style type="text/css">
		html,body{
			width:100%;
			height: 100%;
			position: relative;
			overflow: hidden;

		}
	</style>
</head>
<body>
	<button>清空</button>
	<script type="text/javascript">
		var arr1 = ['1','2','3','4','5','6','7','8','9'];
		var arr2 = ['green','salmon','cyan','#afdafd','black','yellow','red','blue','yellowgreen'];
		$('body').click(function (event) {
			var x = event.offsetX;
			var y = event.offsetY;
			var random1 =parseInt(Math.random()*(9-0)+0);
			var text1 = $('<span>'+ arr1[random1] +'</span>');
			text1.css({
				position:'absolute',
				left:x+'px',
				top:y+'px',
				color:arr2[random1]});
			$(this).append(text1);
			text1.animate({
				'top':'-=200px'
			},2000,function () {
				text1.remove();
			});
		});

	</script>
</body>
</html>